<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"  
      xmlns:h="http://java.sun.com/jsf/html"  
      xmlns:f="http://java.sun.com/jsf/core"  
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:t="http://myfaces.apache.org/tomahawk">  

    <ui:composition template="/templates/layout.xhtml">
        <ui:define name="content">                     
            <div class="block">
                <div class="navbar navbar-inner block-header">
                    <div class="muted pull-left">
                        <t:outputText value="#{courseManageBean.course.courseName}"/>
                    </div>
                </div>
                <div class="block-content collapse in">

                    <div class="form-horizontal">
                        <!-- Nav tabs -->
                        <ul class="nav nav-tabs" role="tablist" id="courseDetailTab">
                            <li class="#{(courseManageBean.selectedTabIdx=='0')?'active':''}">
                                <a href="#homeTab" role="tab" data-toggle="tab"><i class="icon-user"></i>Thông tin</a>
                            </li>
                            <li class="#{(courseManageBean.selectedTabIdx=='1')?'active':''}"><a href="#pupilTab" role="tab" data-toggle="tab"><i class="icon-music"></i>Học Sinh</a></li>
                            <li class="#{(courseManageBean.selectedTabIdx=='2')?'active':''}"><a href="#teacherTab" role="tab" data-toggle="tab"><i class="icon-th-list"></i>Giáo Viên</a></li>
                            <li class="#{(courseManageBean.selectedTabIdx=='3')?'active':''}"><a href="#financeTab" role="tab" data-toggle="tab">Tài Chính</a></li>
                        </ul>
                        <!-- Tab panes -->
                        <div class="tab-content">
                            <div class="tab-pane active" id="homeTab">
                                <ui:include src="course_tab.xhtml" />
                            </div>
                            <div class="tab-pane" id="pupilTab">
                                <ui:include src="coursepupil_tab.xhtml" />
                            </div>
                            <div class="tab-pane" id="teacherTab">
                                <ui:include src="courseteacher_tab.xhtml" />
                            </div>
                            <div class="tab-pane" id="financeTab">
                                <ui:include src="coursefinance_tab.xhtml" />
                            </div>
                            <div class="form-actions">
                                
                                
                                <button type="reset" class="btn" onclick="window.history.back()">Hủy</button>
                            </div>
                        </div>
                    </div>

                </div>
            </div>
            <h:inputHidden value="#{courseManageBean.selectedTabIdx}" id="idxTab"/>
            <t:inputHidden value="#{coursePupilBean.coursePupilID}" id="selectedCoursePupilID"/>
            <t:inputHidden value="#{courseManageBean.selectedTeacherAttendentID}" id="selectedTeacherAttendentID"/>
            <t:inputHidden value="#{courseManageBean.selectedCreditMemoID}" id="selectedCreditMemoID"/>

            <script type="text/javascript" language="JavaScript">
                $("a[data-toggle='tab']").click(function() {
                    //alert("TEST");
                    var href = $(this).attr('href');
                    if (href == "#homeTab") {
                        $("#ppsForm\\:idxTab").val(0);
                    } else if (href == "#pupilTab") {
                        $("#ppsForm\\:idxTab").val(1);
                    } else if (href == "#teacherTab") {
                        $("#ppsForm\\:idxTab").val(2);
                    } else if (href == "#financeTab") {
                        $("#ppsForm\\:idxTab").val(3);
                    }
                });

                $(document).ready(function() {
                    if ($("#ppsForm\\:idxTab").val() == 0) {
                        $('#courseDetailTab li:eq(0) a').tab('show');
                        $('#courseDetailTab li:eq(0) a').tab('show');
                    } else if ($("#ppsForm\\:idxTab").val() == 1) {
                        $('#courseDetailTab li:eq(0) a').tab('show');
                        $('#courseDetailTab li:eq(1) a').tab('show');
                    } else if ($("#ppsForm\\:idxTab").val() == 2) {
                        $('#courseDetailTab li:eq(0) a').tab('show');
                        $('#courseDetailTab li:eq(2) a').tab('show');
                    } else if ($("#ppsForm\\:idxTab").val() == 3) {
                        $('#courseDetailTab li:eq(0) a').tab('show');
                        $('#courseDetailTab li:eq(3) a').tab('show');
                    }

                    $("#ppsForm\\:txtStartDate").datepicker({
                        format: "dd/mm/yyyy"
                    });

                    
                    $("#ppsForm\\:tblPupilCourse th:nth-child(2)").hide();
                    $("#ppsForm\\:tblPupilCourse td:nth-child(2)").hide();

                    $("#ppsForm\\:tblTakenRecord th:nth-child(2)").hide();
                    $("#ppsForm\\:tblTakenRecord td:nth-child(2)").hide();

                    $("#ppsForm\\:tblCreditMemo th:nth-child(2)").hide();
                    $("#ppsForm\\:tblCreditMemo td:nth-child(2)").hide();
                    

                });

                $("#ppsForm\\:tblPupilCourse input:radio").each(function() {
                    var radioSelect = $(this);
                    radioSelect.click(function() {
                        var selectedCoursePupilID=$(this).parent().parent().find("td").eq(1).html();
                        //alert(selectedCoursePupilID);
                        $("#ppsForm\\:selectedCoursePupilID").val(selectedCoursePupilID);
                    });
                });

                $("#ppsForm\\:tblTakenRecord  input:radio").each(function() {
                    var radioSelect = $(this);
                    radioSelect.click(function() {
                        $("#ppsForm\\:selectedTeacherAttendentID").val($(this).parent().parent().find("td").eq(1).html());
                    });
                });

                $("#ppsForm\\:tblCreditMemo  input:radio").each(function() {
                    var radioSelect = $(this);
                    radioSelect.click(function() {
                        $("#ppsForm\\:selectedCreditMemoID").val($(this).parent().parent().find("td").eq(1).html());
                    });
                });

            </script>
        </ui:define>
    </ui:composition>        

</html>  